<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  <!-- 定义文档的字符编码为 utf-8 -->
    <title></title>  <!-- 网页的标题 -->
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>  <!-- 引入 Vue.js 库 -->
</head>
<body>
    <div id="app">  <!-- 定义一个具有 id 为"app"的 div 元素 -->
        <p>input 元素：</p>  <!-- 一个段落，说明接下来是输入元素 -->
        <input v-model="message" placeholder="请输入……">  <!-- 一个输入框，使用 v-model 双向绑定数据变量 message，并设置占位提示 -->
        <p>消息是: {{ message }}</p>  <!-- 一个段落，展示数据变量 message 的值 -->
    </div>
    <script>
        new Vue({  // 创建一个新的 Vue 实例
            el: '#app',  // 指定实例挂载的 DOM 元素的 id 为"app"
            data: {  // 定义数据对象
                message: 'hello',  // 初始化数据变量 message 的值为'hello'
            }
        })
    </script>
</body>
</html>